<!-- 用grid实现一个布局：左侧一块宽度自适应，右边上下排列了两块，有一块高度不确定。 -->

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid 布局示例</title>
  <style>
    /* 基础样式重置 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }

    /* 网格容器 */
    .container {
      display: grid;
      grid-template-columns: 1fr 300px;
      /* 左侧自适应，右侧固定300px */
      grid-template-rows: auto;
      /* 行高自适应内容 */
      gap: 20px;
      /* 间距 */
      max-width: 1200px;
      margin: 0 auto;
    }

    /* 左侧区域 */
    .left {
      background-color: #f0f0f0;
      padding: 20px;
      border-radius: 8px;
    }

    /* 右侧区域 - 嵌套网格 */
    .right {
      display: grid;
      grid-template-rows: auto 1fr;
      /* 第一行高度自适应，第二行填充剩余空间 */
      gap: 20px;
    }

    /* 右侧上部（高度不确定） */
    .right-top {
      background-color: #e0f7fa;
      padding: 20px;
      border-radius: 8px;
    }

    /* 右侧下部（高度固定或最小高度） */
    .right-bottom {
      background-color: #bbdefb;
      padding: 20px;
      border-radius: 8px;
      min-height: 200px;
      /* 设置最小高度 */
    }

    /* 响应式布局 - 小屏幕转为垂直排列 */
    @media (max-width: 768px) {
      .container {
        grid-template-columns: 1fr;
        /* 单列布局 */
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <!-- 左侧区域 - 宽度自适应 -->
    <div class="left">
      <h2>左侧内容</h2>
      <p>这是左侧区域，宽度会根据容器和右侧区域自动调整。</p>
      <p>内容可以是文章、列表或其他主要内容。</p>
    </div>

    <!-- 右侧区域 - 上下排列 -->
    <div class="right">
      <!-- 右侧上部 - 高度不确定 -->
      <div class="right-top">
        <h2>右侧上部</h2>
        <p>这是右侧上部，高度由内容决定。</p>
        <p>内容长度可能不确定，会自然撑开容器。</p>
      </div>

      <!-- 右侧下部 - 高度固定或有最小高度 -->
      <div class="right-bottom">
        <h2>右侧下部</h2>
        <p>这是右侧下部，有最小高度限制。</p>
        <p>即使内容不足，也会保持最小高度。</p>
      </div>
    </div>
  </div>
</body>

</html>